<template>
 <el-container>
  <div style="width:100%;text-align: center">
      <el-row :gutter="20" >
        <el-col :span="24">
          <el-card shadow="hover" >
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605173939161&di=77e94c8877240274bebb65356845debc&imgtype=0&src=http%3A%2F%2Fsem.g3img.com%2Fg3img%2Fxunshang%2Fc2_20171111144553_37627.jpg" alt="">
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-container>
</template>

<script>
import VePie from 'v-charts/lib/pie.common'
import VeLine from 'v-charts/lib/line.common'
import VeHistogram from 'v-charts/lib/histogram.common'
import { homeData } from '../api/apis'
export default {
  name: 'home',
  components: { VePie,VeLine,VeHistogram },
  data() {
    return {
      extend : {
        series: {
          label: { show: true, position: "top" }
        }
      },
      colors : ['#F56C6C'],
      cancelData: {
          columns: ['状态', '订单量' ],
          rows: []
      },
      typeData: {
          columns: ['来源', '订单数量'],
          rows: []
      },
      dateData: {
          columns: ['日期', '每日订单量' ],
          rows: []
      },

      activeIndex:"bb",
      editableTabsValue: '2',
        editableTabs: [{
           title: '首页',
           name: '0',
           content: 'Tab 1 content',
           index:0
        }],
        tabIndex: 1,
        isCollapse: false,
        defaultOpeneds:['1'],
        data:{}
    }
  },
  methods: {
      handleSelect(index, indexPath) {
          console.log( index );

      },
    //222222222222222
      getData(){
        homeData().then((res)=> {
          if(res.status === 200 ){
            if(res.data.code == 0){
                this.cancelData.rows = res.data.data.orderStatus;
                this.typeData.rows = res.data.data.orderType;
                this.dateData.rows = res.data.data.date;
            }else{
                this.$message.error(res.data.msg)
            }
          }
        })
      }
  },created: function () {
      // this.getData();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


   .el-header {
    background-color: #17b3a3;
   color:#fff;
    line-height: 60px;
  }
  .el-submenu .el-menu-item{min-width:0px;}
  .el-aside {
    color: #333;
  }
   .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  i {
    font-size: 1.3em;
    vertical-align: middle;
 }
 .collapse-icon{
  display:inline-block;
  padding-left:10px;
  height: 1.3em;
  line-height: 1.3em;
 }
 .logo{
   width:160px;
   display:inline-block;
   margin-right:20px;
 }
 .logo-close{
  width:45px;
  display:inline-block;
 }
 .a{
   transition: width 0.3s ease-in-out;
 }
 .app-container{
  height:100%;
    border: 1px solid #eee
 }
 .header-user{
  text-align: right;
  font-size: 12px;
  color:#FFf;
 }

 a{
  text-decoration: none;
 }



</style>
